import React, { Component} from 'react'
import { withRouter} from 'react-router-dom'
import { TabBar} from 'antd-mobile'
import PropTypes from 'prop-types'

import './footer.css'

//徽标数
const Item = TabBar.Item

class Footer extends Component{

    static propTypes = {
        navList: PropTypes.array.isRequired,
        readCountMsgs: PropTypes.number.isRequired
    }
    render(){
        //这里获取以下当前的请求路径
        const currnetpath = this.props.location.pathname
        //这里刷选一下 要显示的是哪个列表 底部的导航navList如果有的flag为ture将会被刷选掉
        const navList = this.props.navList.filter(nav => !nav.flag)
        return(
        <div className='footerNav'>
            <TabBar>
                {
                    navList.map((nav, index) =>{
                        return <Item
                            key={nav.path.toString()}
                            title={nav.text}
                            icon={{uri: require(`./images/${nav.icon}.png`)}}
                            selectedIcon={{uri: require(`./images/${nav.icon}-selected.png`)}}
                            selected={nav.path === currnetpath}
                            onPress = {() => {
                                    this.props.history.replace(nav.path)
                                }
                            }
                            badge={nav.path === '/message'?this.props.readCountMsgs:0}
                        >
                        </Item>
                    })
                }
            </TabBar>
        </div>
        )
    }
}

export default withRouter(Footer)